<template>
	<transition name="el-zoom-in-bottom">
		<div class="isShowBoxAbc">
			<div class="topBox">
				<div class="seachBox">
					<input class="topInput" v-model="realValue" :placeholder="placeholder" />
					<img src="../../assets/images/common/close.png" class="close" @click="clear()" />
				</div>
				<el-button type="success" class="search" @click="search()">搜索</el-button>
				<div class="hide">
					<img src="../../assets/images/common/xiala.png" class="down" @click="closeKeyBoardByFather()" />
				</div>
			</div>
			<div class="keyBoard">
				<el-button @click="clickKey(index,item)" :class="index<=25?'keyBoardItem':'useItem'"
					v-for="(item,index) in keyList">
					{{item}}
				</el-button>
			</div>
		</div>
	</transition>
</template>

<script>
	export default {
		name: "abcKeyBoard",
		props: ['inputValue', 'placeholder'],
		data: function() {
			return {
				keyList: [],
				realValue: ''
			};
		},
		methods: {
			clickKey(index, item) {
				if (index <= 25) {
					this.realValue += item;
				}
				if (index == 26) {
					let str = this.realValue;
					this.realValue = str.slice(0, str.length - 1)
				}
				if (index == 27) {
					this.realValue = "";
				}
			},
			clear() {
				this.realValue = "";
			},
			closeKeyBoardByFather() {
				this.$emit("closeKeyBoard")
			},
			search() {
				this.$emit("searchData", this.realValue)
			}
		},
		mounted() {
			this.realValue = this.inputValue;
		},
		created() {
			this.keyList = [];
			for (var i = 0; i <= 25; i++) {
				this.keyList.push(String.fromCharCode((65 + i)).toLowerCase())
			}
			this.keyList.push('退格');
			this.keyList.push('清除');
		}
	};
</script>

<style scoped>
	.yiny {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
	}

	@media (min-height: 0px) and (max-height: 1910px) {
		.isShowBoxAbc {
			position: fixed;
			bottom: 0px;
			left: 0px;
			width: calc(100% - 4.285714rem);
			height: 268px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
			z-index: 3;
			padding: 2.142857rem;
		}

		.topBox {
			display: flex;
			margin-top: 12px;
			position: relative;
			z-index: 3;
			width: 100%;
		}
		
		.seachBox{
			position: relative;
			width: 80%;
			height: 70px;
			margin-left: 5px;
		}

		.topInput {
			width: calc(100% - 40px);
			height: 70px;
			background: #F1F6F9;
			border-radius: 8px;
			border: none;

			font-size: 28px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			padding-left: 40px;
		}

		.close {
			position: absolute;
			top: 13px;
			right: 50px;
			font-size: 50px;
			color: #0080FF;
		}

		.hide {
			background: #F1F6F9;
			border-radius: 8px;
			margin-left: 17px;
			width: 82px;
			height: 70px;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.search {
			margin-left: 17px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32px;
			width: 90px;
			height: 70px;
			background: #46C349;
			border-radius: 8px;
		}

		.down {
			font-size: 32px;
			color: #0080FF;

		}

		.keyBoard {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding-top: 25px;
			z-index: 3;
		}

		.keyBoardItem {
			width: 85px;
			height: 62px;
			background: #57A8FF;
			border-radius: 6px;
			margin: 17px;
			margin-bottom: 2px;
			margin-left: 5px;
			margin-right: 13px;
			text-align: center;
			justify-content: center;
			align-items: center;
			display: flex;
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			position: relative;
		}

		.useItem {
			width: 189px;
			height: 62px;
			background: #57A8FF;
			border-radius: 6px;
			margin: 17px;
			margin-bottom: 2px;
			margin-left: 0px;
			text-align: center;
			justify-content: center;
			align-items: center;
			display: flex;
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}

		input::-webkit-input-placeholder {
			/*WebKit browsers*/

			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #A1ADBB;

		}

		input::-moz-input-placeholder {
			/*Mozilla Firefox*/

			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #A1ADBB;

		}

		input::-ms-input-placeholder {
			/*Internet Explorer*/

			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #A1ADBB;

		}
	}

	@media (min-height: 1919px) {
		.isShowBoxAbc {
			position: fixed;
			bottom: 0px;
			left: 0px;
			width: calc(100% - 4.285714rem);
			height: 368px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
			z-index: 3;
			padding: 2.142857rem;
		}

		.topBox {
			display: flex;
			margin-top: 12px;
			position: relative;
			z-index: 3;
		}

		.topInput {
			width: 768px;
			height: 70px;
			background: #F1F6F9;
			border-radius: 8px;
			border: none;

			font-size: 28px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			margin-left: 5px;
			padding-left: 40px;
		}

		.close {
			position: absolute;
			top: 13px;
			right: 238px;
			font-size: 50px;
			color: #0080FF;
		}

		.hide {
			background: #F1F6F9;
			border-radius: 8px;
			margin-left: 17px;
			width: 82px;
			height: 70px;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.search {
			margin-left: 17px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32px;
			width: 90px;
			height: 70px;
			background: #46C349;
			border-radius: 8px;
		}

		.down {
			font-size: 32px;
			color: #0080FF;

		}

		.keyBoard {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding-top: 25px;
			z-index: 3;
		}

		.keyBoardItem {
			width: 85px;
			height: 62px;
			background: #57A8FF;
			border-radius: 6px;
			margin: 17px;
			margin-bottom: 2px;
			margin-left: 5px;
			margin-right: 13px;
			text-align: center;
			justify-content: center;
			align-items: center;
			display: flex;
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			position: relative;
		}

		.useItem {
			width: 189px;
			height: 62px;
			background: #57A8FF;
			border-radius: 6px;
			margin: 17px;
			margin-bottom: 2px;
			margin-left: 0px;
			text-align: center;
			justify-content: center;
			align-items: center;
			display: flex;
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}

		input::-webkit-input-placeholder {
			/*WebKit browsers*/

			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #A1ADBB;

		}

		input::-moz-input-placeholder {
			/*Mozilla Firefox*/

			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #A1ADBB;

		}

		input::-ms-input-placeholder {
			/*Internet Explorer*/

			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #A1ADBB;

		}
	}
</style>
